<template>
  <div class="processingIstructionMain">
    <div class="headnavigation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>指令流转</el-breadcrumb-item>
        <el-breadcrumb-item class="currentPage">处理指令</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="content">
      <p class="headButton">
        <el-button @click="back" type="primary" icon="el-icon-arrow-left">返回</el-button>
      </p>
      <div class="newsBox">
        <!-- .gradient 单纯为了渐变色以及阴影 -->
        <div class="gradient">
          <p class="title">处理指令</p>
          <div class="contentPart">
            <section>
              <p>
                <span>指令名称:</span>
                <span>当前审批指令名称</span>
              </p>
              <div>
                <span>指令内容:</span>
                <p>
                  margin : top /right /bottom/ left 都是根据父元素宽度计算的
                  padding：百分比值相对于宽度计算 不支持任何形式负值
                  border：不支持百分比值 支持关键字 thin(1px)、默认medium(2px)、thick(3px)
                  border-radius：根据元素整体宽高进行计算，即包含边框和padding后元素尺寸，而不是单纯的相对于width /height计算
                  line-height：百分比值根据父元素文字大小进行计算 / 小数值根据子元素文字大小进行计算
                  vertical-align：百分比值根据 line-height 进行计算
                  margin : top /right /bottom/ left 都是根据父元素宽度计算的
                  padding：百分比值相对于宽度计算 不支持任何形式负值
                  border：不支持百分比值支持关键字thin(1px)、默认medium(2px)、thick(3px)
                  border-radius：根据元素整体宽高进行计算，即包含边框和padding后元素尺寸，而不是单纯的相对于width /height计算
                  line-height：百分比值根据父元素文字大小进行计算 / 小数值根据子元素文字大小进行计算
                  vertical-align：百分比值根据 line-height 进行计算
                </p>
              </div>
            </section>
            <section>
              <p>
                <span>附件:</span>
              </p>
              <ul class="fileList">
                <li v-for="n in 7" :key="n">
                  <img src="../../assets/word.png" alt />
                  <p>
                    <span>需要审批的文件.html</span>
                    <span>1024kb</span>
                  </p>
                </li>
              </ul>
            </section>
          </div>
        </div>
      </div>
      <div class="signStep">
        <!-- .gradient 单纯为了渐变色以及阴影 -->
        <div class="gradient">
          <p class="partTitle">
            <span>流程:</span>
          </p>
          <p class="signPeople">
            <img src="../../assets/important.png" alt />
            <span>审批人：</span>
          </p>
          <div class="step">
            <el-steps direction="vertical" :active="n_signNumber">
              <el-step title="步骤 1" v-for="(item,index) in arr_stepArr" :key="index">
                <template slot="icon">
                  <img src="../../assets/police.jpg" alt />
                </template>
                <template slot="title">
                  <div class="title">
                    <p>
                      <span>{{item.s_userName}}</span>
                      <span v-if="index!=n_signNumber">{{item.s_nodeName}}</span>
                    </p>
                    <span>{{item.s_time}}</span>
                  </div>
                </template>
                <template slot="description">
                  <div class="description">

                    <!-- 当index==n_signNumber表示当前节点签核 -->
                    <div v-if="index==n_signNumber">
                      <div class="isAgree">
                        <span>审批意见：</span>
                        <textarea></textarea>
                      </div>
                      <p class="btnPart">
                        <button>同意</button>
                        <button>驳回</button>
                      </p>
                    </div>
                    <p v-else>{{item.s_news}}</p>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </div>

          <!-- 抄送人 -->
          <div class="copySendMain">
            <span>抄送人：</span>
            <ul class="copySendMainList">
              <li>
                <i>
                  <img src="../../assets/policewoman.jpg" alt />
                </i>
                <span>高平安</span>
              </li>
              <li>
                <i>
                  <img src="../../assets/policewoman.jpg" alt />
                </i>
                <span>高平安</span>
              </li>
              <li>
                <i>
                  <img src="../../assets/policewoman.jpg" alt />
                </i>
                <span>高平安</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr_stepArr: [
        {
          s_nodeName: "发起审批",
          s_userName: "罗平安",
          b_hasSign: true,
          s_time: "2021/08/03 17:30",
          s_news:
            "审批意见：此审批在三日内完成的撒发哈德酸辣粉哈算了电话费撒发的还是撒打开发货是空号富士康好"
        },
        {
          s_nodeName: "已同意",
          s_userName: "罗平安",
          b_hasSign: true,
          s_time: "2021/08/03 17:30",
          s_news:
            "审批意见：此审批在三日内完成的撒发哈德酸辣粉哈算了电话费撒发的还是撒打开发货是空号富士康好"
        },
        {
          s_nodeName: "已同意",
          s_userName: "罗平安",
          b_hasSign: true,
          s_time: "2021/08/03 17:30",
          s_news:
            "审批意见：此审批在三日内完成的撒发哈德酸辣粉哈算了电话费撒发的还是撒打开发货是空号富士康好"
        },
        {
          s_nodeName: "发起审批",
          s_userName: "罗平安",
          b_hasSign: true,
          s_time: "2021/08/03 17:30",
          s_news:
            "审批意见：此审批在三日内完成的撒发哈德酸辣粉哈算了电话费撒发的还是撒打开发货是空号富士康好"
        }
      ],

      // 当前待签核节点
      n_signNumber: 3
    };
  },
  methods:{
    back() {
      this.$router.replace('directive')
    }
  }
};
</script>

<style lang="scss" >
@import "../../assets/sass/instruction/processingIstruction.scss";
</style>